<template>
     <div class="bot">
        <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown">
         <PlayBar v-if="currentSong && showPlayBar" :currentSong="currentSong" :playing="playing"
          @play-ing="$emit('play-ing')" @pause-ing="$emit('pause-ing')"
          @click.native=" showPlayBar = false"
           :currentTime="currentTime"
           :duration="duration" 
         ></PlayBar>
         </transition>
           <transition
                name="custom-classes-transition"
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut">
         <PlayPage v-if="currentSong && !showPlayBar" @hhhhh="showPlayBar = true"
         :currentSong="currentSong" 
         :playing="playing"
         :currentTime="currentTime"
         :duration="duration" @update:currentTime="$emit('update:currentTime', $event);"
         @play-ing="$emit('play-ing')" @pause-ing="$emit('pause-ing')"
         @next_sing="$emit('next_sing')" @last_sing="$emit('last_sing')"
         :currentPLayList="currentPLayList"></PlayPage>
      </transition>
         <PlayListA v-if="showMyPlayList" :currentPLayList="currentPLayList" 
         @update:currentSong="$emit('update:currentSong',$event)" :currentSong="currentSong"/>
     </div>
</template>

<script>
import PlayBar from '@/components/PlayBar.vue'
import PlayPage from '@/components/PlayPage.vue'
import PlayListA from '@/components/PlayListA.vue'
export default {
    props: {
        currentSong: Object,
        playing: Boolean,
        currentTime: Number,
        duration: Number,
        currentPLayList: Array,
    },
   components: {
       PlayBar,
       PlayPage,
       PlayListA,
   },
   data: function () {
       return {
           showPlayBar: true,
           showMyPlayList: false,
       }
   }
   
}
</script>

<style>
   .bot {
       display: flex;
       width: 100%;
       height: 80px;
       background-color: white;
       /* border-radius: 20px; */
   }
</style>